<template>
	<view class="u-page">
		<!-- 商品图片轮播 -->
		<view><u-swiper :list="carouselList" imgMode="aspectFit" height="200" bgColor="#ffffff"></u-swiper></view>

		<!-- 商品 明细 -->
		<u-cell title="商品编号" :value="product.id" />

		<u-cell>
			<view slot="title" class="title">商品名称</view>
			<view slot="value" class="u-line-1">{{ product.name }}</view>
		</u-cell>
		<u-cell>
			<view slot="title" class="title">商品标题</view>
			<view slot="value" class="u-line-1">{{ product.title }}</view>
		</u-cell>
		<u-cell>
			<view slot="title" class="title">商品规格</view>
			<view slot="value" class="u-line-1">{{ product.spec }}</view>
		</u-cell>
		<u-cell title="硬盘" :value="product.disk" />
		<u-cell title="CPU" :value="product.cpu" />
		<u-cell title="内存" :value="product.memory" />
		<u-cell title="显卡" :value="product.video_card" />
		<u-cell title="分辨率" :value="product.resolution" />
		<u-cell title="上架时间" :value="shelfTime" />
		<u-cell title="单价"><u-text slot="value" mode="price" :text="product.price" align="right" bold color="red"></u-text></u-cell>

		<!-- 商品购买区域 -->
		<view>
			<view class="count-buy">
				<text class="title u-line-1">购买数量</text>
				<u-number-box class="number" v-model="count" integer :min="1" :max="10" buttonSize="40" />
				<view style="width:100px;"><u-button type="primary" @click="onClickAddShopcart">加入购物车</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
//1.导入封装后的接口
//根据id获取商品对象（详情）
import * as ProductAPI from '@/api/product.js';
//导入将商品添加购物车接口
import * as CartAPI from '@/api/cart.js';
import * as Tools from '@/utils/tools.js';
export default {
	data() {
		return {
			product: {
				price:0,
			}, //商品对象（详情）
			carouselList: [], //商品轮播图片数组
			count: 1 //步进器绑定的数量
		};
	},

	onLoad(options) {
		console.log(options);
		let id = options.productId;
		//2.使用封装后的接口
		ProductAPI.getProductDetailById(id).then(result => {
			console.log(result);
			this.product = result.data; //保存API调用的返回数据
			//根据返回数据生成轮播图数组（用商品的中图片）
			this.product.picList.forEach(item => {
				this.carouselList.push(this.$fullUrl(item.md));
			}); //数据的遍历
		});
	},

	// 方法
	methods: {
		//处理添加购物车
		onClickAddShopcart() {			

			let params = {
				product_id: this.product.id,
				count: this.count
			};
			//2.使用封装后的接口,注意：接口有参数
			CartAPI.addCart(params)
				.then(result => {
					uni.$u.toast(result.msg);
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	// 计算属性
	computed: {
		shelfTime() {
			let date = new Date(this.product.shelf_time);
			return Tools.dateFormat(date, 'yyyy年MM月dd日');
		}
	}
};
</script>

<style scoped lang="scss">
.title {
	width: 80px;
}

.count-buy {
	display: flex;
	flex-direction: row;
	margin: 20px 0px;
	align-items: center;
	.title {
		flex: 1;
		text-align: left;
		padding-left: 16px;
	}
	.number {
		padding: 0 5px;
	}
}
</style>
